<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{ msg }}</p>
      <books-ul></books-ul>
      <books-ul></books-ul>
      <books-ul></books-ul>
      <books-ul></books-ul>
    </div>

    <script src="../vue.js"></script>
    <script>
      // 组件化开发，好处：标准、分治、重用、组合

      // 可以通过 Vue.component 来注册全局组件
      //   第一个参数：组件名称（推荐使用大驼峰，因为日后学习单文件组件(*.vue)时也是使用大驼峰的）
      //   第二个参数：类似于 new Vue 时的配置选项
      Vue.component('BooksUl', {
        // template 即为组件的模板，类似 new Vue 时的 el，只不过 el 是元素的选择器
        template: `
          <ul>
            <li v-for="v in books" :key="v.id">
              <span style="color: red;">{{ JSON.stringify(v) }} </span>
              <a href="" @click.prevent="del(v.id)">删除</a>
            </li>
          </ul>
        `,
        // 为什么这里的数据变成了一个函数，返回值才是最终的数据呢？
        //   因为如果是对象，会造成同一个组件的不同实例之间的数据污染问题
        //   变成函数后，每一个组件实例的数据都是通过调用该函数获得的，那么每次调用该函数都会创建出一个新的对象，所以避免了这个问题
        data() {
          return {
            books: [
              {
                id: 1,
                name: '三国演义',
                date: Date.now(),
              },
              {
                id: 2,
                name: '水浒传',
                date: Date.now(),
              },
              {
                id: 3,
                name: '红楼梦',
                date: Date.now(),
              },
              {
                id: 4,
                name: '西游记',
                date: Date.now(),
              },
            ],
          };
        },
        methods: {
          del(id) {
            this.books = this.books.filter((v) => v.id !== id);
          },
        },
      });

      new Vue({
        el: '#app',
        data: {
          msg: 'hello',
        },
      });
    </script>
  </body>
</html>
